<template>
    <div>
      <Header :position="positionTitle"></Header>
      <div style="display: flex;flex-flow: column">
        <el-card style="width: 100%;height: 513px">
            <div slot="header"
                 style="font-size: 20px;font-weight: bolder;text-align: left">
                <span>数据文件筛选</span>
            </div>
          <div style="display: flex; justify-content: space-between;">
<!--          <div style="display: flex;margin-top: 10px;margin-bottom: 10px">-->
            <div style="margin-right: 10px">
              <el-select  style="margin-right: 23px"
                      v-model="positionSelect1" placeholder="请选择数据类型">
                <el-option v-for="item in positionSelectData1" :key="item" size="small"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
              <el-select  style="margin-right: 23px"
                      v-model="positionSelect2" placeholder="请选择上传用户">
                <el-option v-for="item in positionSelectData2" :key="item" size="small"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
              <el-select style="margin-right: 23px"
                      v-model="positionSelect3" placeholder="请选择上传日期">
                <el-option v-for="item in positionSelectData3" :key="item" size="small"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
                <el-button type="primary" size="small">检索</el-button>
            </div>
            <div style="display: flex">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传数据</el-button>
                <div slot="tip" class="el-upload__tip">支持上传excel，csv文件</div>
              </el-upload>
            </div>
          </div>
          <el-table :data="dataList" stripe style="width: 100%;padding: 10px;" height="310px" border>
            <el-table-column label="数据类型" prop="type">
            </el-table-column>
            <el-table-column label="上传用户" prop="upcloadName">
            </el-table-column>
            <el-table-column label="上传日期" prop="upcloadDate">

            </el-table-column>
            <el-table-column label="操作" prop="Threshold">
<!--                <template slot-scope="scope">-->
                <template>
                  <el-button size="mini" type="danger">删除</el-button>
                  <el-button size="mini" type="primary">下载</el-button>
                  <el-button size="mini" type="success">查看详情</el-button>
                </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="20"
              style="display: inline-block"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
            </el-pagination>
          </div>
        </el-card>
        <div style="margin-top: 10px;width: 100%;display: flex;height: 350px">
          <el-card style="width: 50%;margin-right: 10px">
              <div slot="header"
                   style="font-size: 20px;font-weight: bolder;text-align: left">
                  <span>数据文件详情</span>
              </div>
            <div id="WaveformGraph" style="width: 100%;height: 300px"></div>
          </el-card>
          <el-card style="width: 50%">
              <div slot="header"
                   style="font-size: 20px;font-weight: bolder;text-align: left">
                  <span>数据文件参数详情</span>
              </div>
            <div style="width: 100%;display: flex">
              <el-card style="width: 50%;" shadow="never">
                <h3 style="text-align: left;margin-bottom: 20px">时域数据参数</h3>

                <div style="display: flex;margin-bottom: 20px;font-weight: bold">
                    <div style="color: black;font-size: 18px;width: 70%;text-align: center">峰值</div>
                    <div style=";width: 30%;text-align: left">{{leak}}</div>
                </div>
                <div style="display: flex;;margin-bottom: 20px;font-weight: bold">
                    <div style="color: black;font-size: 18px;width: 70%;text-align: center;">均值</div>
                    <div style=";width: 30%;text-align: left">{{average}}</div>
                </div>
                <div style="display: flex;;margin-bottom: 20px;font-weight: bold">
                    <div style="color: black;font-size: 18px;width: 70%;text-align: center">均亏根值</div>
                    <div style=";width: 30%;text-align: left">{{rootValue}}</div>
                </div>
              </el-card>
              <div style="width: 10%"></div>
              <el-card style="width: 50%" shadow="never">
                <h3 style="text-align: left;margin-bottom: 20px">频域数据参数</h3>
                <div style=";margin-bottom: 20px;display: flex;align-items: center;;font-weight: bold;height: 100%">
                    <div style="color: black;font-size: 18px;width: 70%;text-align: center">转到频率</div>
                    <div style=";width: 30%;text-align: left">{{roundFrequency}}</div>
                </div>
                <div style=";margin-bottom: 20px;display: flex;font-weight: bold">
                    <div style="color: black;font-size: 18px;
                                width: 70%;text-align: center">平均频率</div>
                    <div style=";width: 30%;text-align: left">{{averageFrequency}}</div>
                </div>
              </el-card>
            </div>
          </el-card>
        </div>
      </div>
    </div>
</template>

<script>
    import Header from "../Header";
    import * as echarts from 'echarts'
    export default {
        name: "DateFileCard",
        components:{Header},
      data(){
          return{
            positionSelect1:'',
            positionSelect2:'',
            positionSelect3:'',
            positionSelectData1:[{name:'震动',value:1},{name:'发热',value:2},{name:'噪音',value:3}],
            positionSelectData2:[{name:'高坚秉',value:1},{name:'卢泽宇',value:2},{name:'侯光辉',value:3}],
            positionSelectData3:[{name:'2020-11-09',value:1},{name:'2020-11-15',value:2},{name:'2020-11-20',value:3}],
            dataList:[{type:'文件',upcloadName:'高坚秉',upcloadDate:'2020-11-09'},
              {type:'文件',upcloadName:'周芷若',upcloadDate:'2020-11-09'},
              {type:'文件',upcloadName:'高坚秉',upcloadDate:'2020-10-12'},
              {type:'文件',upcloadName:'风清扬',upcloadDate:'2020-9-20'},
              {type:'文件',upcloadName:'高坚秉',upcloadDate:'2020-07-12'},
              {type:'文件',upcloadName:'呼延灼',upcloadDate:'2020-05-09'},],
            leak:'12',
            average:'23',
            rootValue:'123',
            roundFrequency:78,
            averageFrequency:134,
            positionTitle:{
                  secondTitle:'数据管理' ,
                  thirdTitle:'文件管理',
                routeString:'/DataManagement/DateFile'
              },
              WaveformGraphData:{
                    xData:['19:54','19:55','19:56','19:57','19:58','19:59','20:00'],
                  value1:[290, 312, 191, 123, 421, 234, 125],
                  value2:[320, 332, 301, 334, 390, 330, 320],
              }
          }
      },
      mounted() {
        this.DrawWaveformGraph()
      },
      methods:{
        DrawWaveformGraph(){
          let myChart = echarts.init(document.getElementById('WaveformGraph'));
          let option = {
            tooltip : {
              trigger: 'axis'
            },
            legend: {
              data:['零·峰值','RMS','波高半数','速度RMS值']
            },
            toolbox: {
              show : true,
              feature : {
                mark : {show: true},
                // dataView : {show: true, readOnly: true},
                magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore : {show: false},
                saveAsImage : {show: false}
              }
            },
            calculable : true,
            xAxis : [
              {
                type : 'category',
                name:'时间',
                boundaryGap : false,
                data : this.WaveformGraphData.xData
              }
            ],
            yAxis : [
              {
                name: '次数',
                type : 'value'
              }
            ],
            series : [
              {
                name:'停用次数',
                type:'line',
                stack: '停用次数',
                smooth: true,
                data:this.WaveformGraphData.value1
              },
              {
                name:'检修次数',
                type:'line',
                stack: '检修次数',
                smooth: true,
                data:this.WaveformGraphData.value2
              },
            ]
          };
          myChart.setOption(option);
        },
      }
    }
</script>

<style scoped>
</style>
